<template>
  <div class="social-container">
    <a class="social-item" v-for="(item, index) in showSocialList" :key="index" target="_blank" :href="item.href">
      <svg-icon :icon-class="item.type" size="20px" :color="item.color"></svg-icon>
    </a>
  </div>
</template>

<script setup>
import SvgIcon from '@/components/svgIcon/index.vue';
const showSocialList = [
  {
    type: 'github',
    href: 'https://github.com/Hedongliang0518',
  },
  {
    type: 'gitee',
    href: 'https://gitee.com/he-dongliang0518',
  },
  {
    type: 'bilibili',
    href: 'https://www.bilibili.com/',
  },
];
</script>

<style scoped lang="scss">
.social-container {
  margin-top: 10px;
  text-align: center;

  .social-item {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: 0 10px;
    text-align: center;
  }
}
</style>
